<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <base href="<%=basePath%>">
  <meta charset="utf-8">
  <title>产线查询</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
  <style type="text/css">
    /*表格单选框居中 */
	.layui-table-cell .layui-form-radio {
		position: relative;
		top: 50%;
	}
	/* 禁止刷新后出现横向滚动条 */
	body{overflow-y: scroll;} 
  </style>
</head>
<body>
	<div class="layui-fluid">
	  <div class="layui-row layui-col-space10">
	  	<div class="layui-col-md4">
			<div class="layui-card">
				<div class="layui-card-header">人员点名</div>
				<div class="layui-card-body">
				  <table id="LAY-rollcall-content-list" lay-filter="LAY-rollcall-content-list"></table> 
		      	</div>
	      </div>
	   </div>
  
       <div class="layui-col-md3">
          <div class="layui-card">
            <div class="layui-card-header">已签到人员</div>
            <div class="layui-card-body">
              <table id="LAY-rollcallinfoed-content-list" lay-filter="LAY-rollcallinfoed-content-list"></table> 
            </div>
          </div>
       </div>
       
       <div class="layui-col-md5">
          <div class="layui-card">
            <div class="layui-card-header">未签到人员</div>
            <div class="layui-card-body">
              <table id="LAY-rollcallinfonot-content-list" lay-filter="LAY-rollcallinfonot-content-list"></table> 
            </div>
        </div>
     </div>
  </div>
  </div>
  <script src="layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: 'layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'contlist', 'table', 'laydate'], function(){
    var table = layui.table
    ,admin = layui.admin
    ,laydate = layui.laydate
    ,form = layui.form;
    
    laydate.render({
		elem: '#date', //弹出页的指定元素生日时期需要为时间格式
	});
    
    table.render({
        elem: '#LAY-rollcall-content-list'
        ,url:'rollcall/findListJson/'
        ,limit:10
        ,limits:[10,20,30,40,50,60,70,80,90]
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
           {type:'radio'}
		  ,{field:'addtime', title: '点名时间', sort: true}
          ,{field:'uuid', title: 'UUID', sort: true}
        ]]
    	,page: true
    	,done: function(res, curr, count){
        	initRollcallnotTable();
    	}
	    ,parseData: function(res){ //res 即为原始返回的数据
	    	if(res.data[0] != undefined){    
	    			res.data[0].LAY_CHECKED=true
			        return {
			         "code": res.code, //解析接口状态
			         "msg": res.msg, //解析提示文本
			         "count": res.count, //解析数据长度
			         "data": res.data //解析数据列表
			        };
	    		}
	       }
      });
    
    //监听产线行单击事件（双击事件为：rowDouble）
    table.on('row(LAY-rollcall-content-list)', function(obj) { //注：test是table原始容器的属性 lay-filter="对应的值"
    	var data = obj.data;
    	//选中行样式
    	obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
    	//选中radio样式
    	obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
    	
    	//重载工具表格数据
        table.reload('LAY-rollcallinfoed-content-list', {
          where: {
        	  		uuid:data.uuid,
        	  		status:'已签到'
        	  	 }
        });
    	
        //重载工具表格数据
        table.reload('LAY-rollcallinfonot-content-list', {
          where: {
        	  		uuid:data.uuid,
        	  		status:'未签到'
	        	 }
        });
    });

    //初始化工段信息
    function initRollcallnotTable(){
    	//初始化人员已打卡数据
        table.render({
            elem: '#LAY-rollcallinfoed-content-list'
            ,url:'rollcallinfo/findListJson'
            ,where:selectRollcallinfo('已签到')
            ,limit:15
            ,limits:[15,20,30,40,50,60,70,80,90]
            ,cols: [[
      		   {field:'prisonercode', title: '人员编号', sort: true}
      		  ,{field:'prisonername', title: '人员姓名', sort: true}
            ]]
        	,page: true
        });
    	
        //初始化人员未打卡数据
        table.render({
            elem: '#LAY-rollcallinfonot-content-list'
            ,url:'rollcallinfo/findListJson'
            ,where:selectRollcallinfo('未签到')
            ,limit:15
            ,limits:[15,20,30,40,50,60,70,80,90]
            ,cols: [[
      		   {field:'prisonercode', title: '人员编号', sort: true}
      		  ,{field:'prisonername', title: '人员姓名', sort: true}
      		  ,{field:'reason', title: '未打卡原因', edit: 'text'}
            ]]
        	,page: true
        });
    }
    
    //将表单数据转为json
	function selectRollcallinfo(status){
		//获取选中的流水线
		var checkStatus = table.checkStatus('LAY-rollcall-content-list');
	    var data = checkStatus.data;
	    var uuid = data[0].uuid;
    	if(uuid == undefined){
    		uuid = -100;
    	}
		var json = {
			uuid:uuid,
			status:status
		};
		return json;
	}
    
    //监听单元格编辑
    table.on('edit(LAY-rollcallinfonot-content-list)', function(obj){
      var value = obj.value //得到修改后的值
      ,data = obj.data //得到所在行所有键值
      ,field = obj.field; //得到字段
      
      //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
      
      layer.msg('正在提交请稍候。。。', {icon: 16,time:'-1',shade : [0.5 , '#000' , true]});
      
      admin.req({
  		url: 'rollcallinfo/updateRollcallinfo' //实际使用请改成服务端真实接口
 	        ,data: data
 	        ,done: function(res){
 	         	if(res.flag==1){
 	         		layer.msg(res.msg);
 			  	}else{
 			  		layer.msg('保存失败');
 			  	}
 	         	table.reload('LAY-rollcallinfonot-content-list');
 	         }
       });
    });
    
  });
 
  </script>
</body>
</html>